{% extends 'images/images_base.html' %}

{% block title %}My images | Social Network{% endblock title %}

{% block content %}
    <div class="main-images">
        <h2>My images</h2>
        <div class="line"></div>
        <p>Here is a list of your images. You can also add a new one.</p>
        <form action="{% url 'images:show' %}" method='post' enctype='multipart/form-data'>
            {% csrf_token %}
            {% for field in form %}
                {{ field }}
            {% endfor %}
            <button type="submit" class="btn btn-success">Add image</button>
        </form>
        <div class="list-images">
            {% for image in list_of_images %}
                {% if image.image %}
                <div class="image">
                    <div class="line"></div>
                    <span>{{ image.title }}</span>
                    <img src="{{ image.image.url }}">
                    <div class="likes">
                        
                        <span>likes: 0</span>
                        <a href="{% if image.slug %}{% url 'images:show_image' image.slug %} {% endif %}" class="btn btn-primary btn-sm">Watch</a>
                        <a href="{% if image.slug %}{% url 'images:update_image' image.slug %} {% endif %}" class="btn btn-secondary btn-sm">Update</a>
                        <a href="{% if image.slug %}{% url 'images:delete_image' image.slug %} {% endif %}" class="btn btn-danger btn-sm">Delete</a>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>

    <style>

        div.likes {
        }

        div.likes span {
            margin-right: 10px;
        }

        div.list-images .image {
            display: flex;
            flex-direction: column;
            margin-bottom: 35px;
            justify-content: center;
            align-items: center;
        }

        div.list-images {
            display: flex;
            flex-flow: row wrap;
            margin-top: 5em;
        }

        div.list-images img {
            width: 16.5em;
            height: 10em;
            border: 1px solid #DDD;
            border-radius: 8px;
            margin: 10px 10px 10px 25px;
        }

        div.list-images img:hover {
            cursor: pointer;
            box-shadow: 1px 1px 5px #DDD;
        }

        div.main-images {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        div.line {
            width: 50%;
        }

        .main-images input {
            margin-left: 20px;
            background: rgb(28, 30, 33);
            box-shadow: inset -100px -100px 0 rgb(28, 30, 33); /*Prevent yellow autofill color*/
            color: rgb(52, 56, 61);
            border-radius: .25rem;
            padding: 10px;
            margin-bottom: 5px;           
        }

        input[type="text"]:focus {
            color: rgb(255, 255, 255);
        }

        .update-main textarea{
            background: rgb(28, 30, 33);
            box-shadow: inset -100px -100px 0 rgb(28, 30, 33); /*Prevent yellow autofill color*/
            color: rgb(52, 56, 61);
            border-radius: .25rem;
            padding: 10px;
            margin-bottom: 5px;
            border: 1px solid #DDD;
        }

        #wrapper-image textarea[type="text"]:focus {
            color: rgb(255, 255, 255);
        }



        .list-images input[type="text"]:focus {
            color: rgb(255, 255, 255);
        }

    </style>
{% endblock content %}
